<template>
  <div>
    <div>
      <p class="title">商城列表</p>
    </div>
    <div class="search-box">
      <div>
        <div>
          <span>状态：</span>
          <el-select v-model="query.state" @change="search" size="small" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-input v-model="query.content" @change="search" clearable class="input" size="small" prefix-icon="el-icon-search" placeholder="请选择">
      </el-input>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="add">新建</el-button>
    </div>
    <div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column label="序号" align="center" type="index" width="80">
        </el-table-column>
        <el-table-column prop="storeName" label="门店名称" align="center">
        </el-table-column>
        <el-table-column prop="stName" label="门店类型" align="center">
        </el-table-column>
        <el-table-column prop="storeAddress" label="门店地址" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="storeMobile" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="number" label="优惠券数量" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state ==1">上架</span>
            <span v-else-if="scope.row.state ==2">下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row.storeId)">编辑</el-button>
            <el-button type="text"
              @click="$router.push({ path: '/Home/CheckStore', query: { storeId:scope.row.storeId } })">查看</el-button>
            <el-button type="text" v-if="scope.row.state == 1">下架</el-button>
            <el-button type="text" v-else-if="scope.row.state == 2">上架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
      </Page>
    </div>
    <el-dialog title="新建门店" center width="1000px" :visible.sync="dialogVisible">
      <el-form :model="form" ref="form" label-width="120px">
        <div class="search-box">
          <el-form-item prop="storeName" label="门店名称：">
            <el-input v-model="form.storeName" size="small"></el-input>
          </el-form-item>
          <el-form-item prop="stId" label="门店类型：">
            <el-select v-model="form.stId" size="small" placeholder="请选择">
              <el-option v-for="item in typeList" :key="item.stId" :label="item.stName" :value="item.stId">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="search-box">
          <el-form-item prop="storeMobile" label="门店电话：">
            <el-input v-model="form.storeMobile" maxlength="11" size="small"></el-input>
          </el-form-item>
          <el-form-item prop="storeAddress" label="门店地址:">
            <el-input v-model="form.storeAddress" size="small"></el-input>
          </el-form-item>
        </div>
        <el-form-item prop="husinessHours" label="营业时间：">
          <el-input v-model="form.husinessHours" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="cover" label="上传封面：">
          <UploadImg :imgUrl="form.cover" @uploadImg="uploadImg"></UploadImg>
        </el-form-item>
        <el-form-item prop="intro" label="门店简介：">
          <RichText :content="form.intro" @onEditorChange="onEditorChange" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import RichText from "@/components/RichText.vue"
  import UploadImg from "@/components/UploadImg"
  import apis from "@/apis/modules/store"
  export default {
    name: "Store",
    components: {
      Page,
      RichText,
      UploadImg
    },
    data() {
      //手机号自定义规则
      var validatorMobile = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入手机号"));
        } else {
          var isPhone = /^[1][0-9][0-9]{9}$/;
          if (!isPhone.test(value)) {
            callback(new Error("手机号输入错误"));
          } else {
            this.canClick = true;
            callback();
          }
        }
      };
      return {
        query:{
          state: "",//状态 all 全部 1 上架 2下架
        content: "",//搜索内容
        pageNumber: 1,//当前页数
        pageSize: 10,//每页显示多少条
        },
        total: 0,//总数
        tableData: [],//列表数据
        form: {
          storeName: "",//门店名称
          stId: "",//门店类型id
          storeMobile: "",//电话
          storeAddress: "",//门店地址
          husinessHours: "",//营业时间
          cover: "",//封面
          intro: "",//门店简介
        },//表单数据
        rules: {
          storeName: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
          stId: [{ required: true, message: '请选择门店类型', trigger: 'change' }],
          storeMobile: [{ validator: validatorMobile, trigger: "blur" }],
          storeAddress: [{ required: true, message: '请输入门店地址', trigger: 'blur' }],
          husinessHours: [{ required: true, message: '请输入营业时间', trigger: 'blur' }],
          cover: [{ required: true, message: '请输入上传封面', trigger: 'blur' }],
          intro: [{ required: true, message: '请输入输入门店简介', trigger: 'blur' }],
        },
        isAdd: 0,//是否是添加门店
        dialogVisible: false,//是否显示表单
        typeList: [],//门店类型
        options: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "上架",
          },
          {
            value: "2",
            label: "下架",
          },

        ],

      };
    },
    watch: {
      dialogVisible(value) {
        if (value) {
          this.getAllStoreType()
        } else {
          this.form = {
            storeName: "",
            stId: "",
            storeMobile: "",
            storeAddress: "",
            husinessHours: "",
            cover: "",
            intro: "",
          }
        }
      }
    },
    mounted() {
      this.getStore()
    },
    methods: {
      // 条件搜索
      search(){
        this.query.pageNumber=1;
        this.getStore()
      },
      // 获取门店列表
      async getStore() {
        const { code, data, msg } = await apis.getStore(this.query)
        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list;
        }
      },
      //获取门店类型
      async getAllStoreType() {
        const { code, data, msg } = await apis.getAllStoreType()
        if (code == 200) {
          this.typeList = data;
        }
      },
      // 获取图片地址
      uploadImg(e) {
        this.form.cover = e.join(',');
      },
      // 获取富文本编辑器内容
      onEditorChange(content) {
        this.form.intro = content;
      },
      // 添加门店
      add() {
        this.isAdd = 1;
        this.dialogVisible = true;
      },
      // 编辑门店
      async edit(storeId) {
        this.isAdd = 2;
        const { code, data, msg } = await apis.showStore({
          storeId
        })
        if (code == 200) {
          this.form = data;
          this.dialogVisible = true;
        }
      },

      // 提交表单
      submitForm() {
        console.log(this.form)
        this.$refs.form.validate(async valid => {
          if (valid) {
            if (this.isAdd == 1) {
              // 添加门店
              const { code, data, msg } = await apis.insertStore(this.form)
              if (code == 200) {
                this.$message.success(msg)
                this.dialogVisible = false;
              } else {
                this.$message.error(msg)
              }
            } else if (this.isAdd == 2) {
              // 修改门店
              const { code, data, msg } = await apis.updateStore(this.form)
              if (code == 200) {
                this.$message.success(msg)
                this.dialogVisible = false;
              } else {
                this.$message.error(msg)
              }
            }
          }
        })
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getStore()
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getStore()
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;

  }

  .search-box {
    display: flex;
    justify-content: space-between;
  }

  .el-input {
    width: 300px;
    margin-bottom: 16px;
  }

  .el-select {
    width: 300px;
  }

  .btn {
    text-align: right;
    margin-bottom: 16px;
  }
</style>